<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素  心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 自适应居中 */
				margin: 300px auto;
				/* 转换属性：旋转 */
				transform: rotate(135deg);
				/* 透明度属性：属性值 0~1 范围值 */
				opacity: .8;
				/* 滤镜属性：光晕：下阴影 */
				filter: drop-shadow(0 0 100px #e4393c)
				/* 动画属性: 关键帧名称  过渡时间 过渡方式*/
				animation: heart .8s linear infinite;
			}
			/* ③伪类选择器：给元素附加上效果的选择器
			 语法：div:hover{}  当鼠标悬停到div上 实现的【样式】效果
			 需求：鼠标悬停到中间位置改成圆
			 选择器:before 在元素之前添加文本，通常与content:""
			 选择器:after  在元素之后添加文本，通常与content:""
			 */
			/* 伪类选择器div上方增加文本/画圆 */
			div:before{
				content: "";/* 行砖块 */
				/* 显示属性 
				  display: block;转成块级元素
				  display: inline;转成行级元素
				  display: none;元素消失
				*/
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				left: -100px;
			}
			div:after{
				content: "";/* 行砖块 */
				/* 显示属性 
				  display: block;转成块级元素
				  display: inline;转成行级元素
				  display: none;元素消失
				*/
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				left: -0px;
				top: -100px;
			}
			
			/* ------------------动画---------------- */
			/* 1.创建关键帧--手翻书 */
			@keyframes heart{
				/* 3个画面:①等比例出现，防止跳帧 ②缩小比例 ③放大比例 */
				   0%{
					   /* 转换属性：缩放属性值
					   1表示等比例
					   .8表示缩小0.8倍
					   1.2表示放大1.2倍
					   */
					  transform: rotate(135deg) scale(1) ;
				   }
				   30%{
					   transform: rotate(135deg) scale(.8) ;
				   }
				   100%{
					   transform: rotate(135deg) scale(1.2);
				   }
			}
		</style>
	</head>
	<body>
		<!-- 画一颗心   html  1个元素 -->
		<div></div>
		<!-- html: 元素的分类
		 ①块元素： 可以设置高宽、独占一行，典型的块元素：div
		 ②行元素： 不可以设置高宽、可以在一行内显示，典型的块元素：div
		      文本内容属于行元素
		 ③行内块元素： 可以设置高宽、可以在一行内显示，典型行内元素：img
		 -->
		 <!-- 音乐 老火狐-->
		 <audio src="renxi.mp3" autoplay loop></audio>
		 
	</body>
</html>